<include file="../header" />
<body>
	<div class="wraper">
		<div class="load">
			<img class="load-bee" src="/assets/repairhsd/images/load-bee.png"/>
		</div>
	    <div class="top">
	        <p class="clearfix">
	        	<a href="/Repairhsd/RepairhsdUserOrder/userOrderList/repairId/{BEESCRM:$repairId}" class="iconfont icon-zuo fl-left"></a>
	        	<span class="fl-left">我要报修</span>
	        	<a href="/Repairhsd/RepairhsdUserOrder/userOrderList/repairId/{BEESCRM:$repairId}" class="iconfont icon-shouye text-right fl-right"></a>
	        </p>
	    </div>
	   <div class="upload-img clearfix">
		   <div class="imgbox fl-left"><img src="{BEESCRM:$data['img']['url']}" id="picture" style="width:100px;height:100px;"/></div>
		   <div class="add-img fl-left" >
			   <input class="file-input" type="file" accept="image/*" name="upload-file" id="fileupload_input"/>
			   <span class="iconfont icon-tianjia tianjia"></span>
		   </div>
    	</div>
    <div>
        <p class="form-box">
            <textarea class="textarea" placeholder="请详细描述需维修的位置及情况，例如：淋浴头底下靠近地面的那个水龙头一直在滴水" id="content">{BEESCRM:$data.content}</textarea>
        </p>
        <div class="message clearfix">
			<if condition="empty($addressInfo)">
				<p class="title">报修地址</p>
			</if>
	        <div class="clearfix" style="position: relative">
	            <p class="mes fl-left" data-address_id="{BEESCRM:$addressInfo['address_id']}" id="address"><span id="community_name" data-community_id="{BEESCRM:$addressInfo['community_id']}">{BEESCRM:$addressInfo['community_name']}</span> <span id="building_name" data-building_id="{BEESCRM:$addressInfo['building_id']}">{BEESCRM:$addressInfo['building_name']}</span> <span id="room_name" data-room_id="{BEESCRM:$addressInfo['room_id']}">{BEESCRM:$addressInfo['room_name']}</span>
					<span id="address_detail">{BEESCRM:$addressInfo['address_detail']}</span>
	            	<br/>
	            	<span id="real_name">{BEESCRM:$addressInfo['real_name']}</span>  <span id="mobile">{BEESCRM:$addressInfo['mobile']}</span>
	            </p>
				<if condition="$addressInfo">
					<a href="/Repairhsd/RepairhsdAddress/addressList/repairId/{BEESCRM:$repairId}" class="btn-change fl-right">更换地址</a>
				<else/>
					<a href="/Repairhsd/RepairhsdAddress/addAddress/repairId/{BEESCRM:$repairId}" class="btn-change fl-right">添加地址</a>
				</if>
	        </div>
        </div>
        <p class="form-box">
            <select class="select" id="project_id">
            	<option value="0">请选择报修一级项目</option>
            	
            </select>
            <span class="triangle"></span>
        </p>
        <p class="form-box" id="child_project" style="display: none;">
            <select class="select" id="project_child_id" >
            </select>
            <span class="triangle"></span>
        </p>
    </div>
    <!-- <div class="message clearfix">
		
    </div> -->
    
    <div class="message clearfix">
    	
    		<span>维修费用:<font id="cost" color="#ba0707">0</font>元</span>
    	
   </div>
    <div class="message clearfix">
    	
    		<span>
				<p>温馨提示：现有报修平台，只涉及学生寝室内部相关报修，如有其它报修，请登录校公共事务管理处相关报修平台进行申报。</p>
				<p>如右下角显示中国移动图标，请点击图标，将其关闭，以免影响报修订单提交。</p>
			</span>
    	
   </div>   
    <div class="marginb-50"></div>
    <ul class="btn-box">
    	<input type="hidden" id="address_id" value="{BEESCRM:$data['address_id']}">
    	<input type="hidden" id="order_id" value="{BEESCRM:$data['order_id']}">
		<input type="hidden" id="clear_child" value="1">
		<a href="javascript:history.back(-1)" class="btn half js_cancel" >取消</a>
        <a href="javascript:void(0)" class="btn half addorder" >提交</a>
    </ul>
</div>

	<input type="hidden" name="imageNeed" id="imageNeed" value="{BEESCRM:$repairInfo['image_condition']}">

<include file="../commonJS" />
<script type="text/javascript" src="/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.fileupload.js"></script>
<script type="text/javascript" src="/assets/bower_components/upload/jquery.iframe-transport.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//将sessionStorage的内容渲染页面
		getSessionStorage();
		delSessionStorage();
		//图片上传
		$("#fileupload_input").fileupload({
			url:"/Base/Common/upload",//文件上传地址，当然也可以直接写在input的data-url属性内
			beforeSend:function(){
				$('.load').show();
			},
			done:function(e,result){
				//done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
				//注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
				//返回的数据在result.result中，假设我们服务器返回了一个json对象
				var data=$.parseJSON(result.result);
				if(data.status=='S'){
					$('#picture').attr('src',data.url);
					setTimeout($('.load').hide(),3000);
				}else{
					$.alert('error',data.message);
					setTimeout($('.load').hide(),3000);
					return false;
				}
			}
		});

		//获得报修一级地址
		var communityId = "{BEESCRM:$addressInfo['community_id']|default=0}";
		var projectId = $('#project_id').val();
		getProjectByCommunity(communityId,projectId);
		function getProjectByCommunity(communityId,projectId){

			$.ajax({
				url:"/Repairhsd/RepairhsdUserOrder/ajaxGetProject/repairId/{BEESCRM:$repairId}",
				type:'post',
				data:{'community_id':communityId},
				dataType:"json",
				success:function(res){
					var is_clear = 1;
					var option = '<option value="0" data-cost="0">请选择报修一级项目</option>';
					for(var j=0;j<res.data.length;j++){
						if (res.data[j].project_id == projectId){
							is_clear = 0;
							option += '<option value="' + res.data[j].project_id + '" data-cost="' + res.data[j].cost + '" selected>' + res.data[j].project_name + '</option>';
						}else {
							option += '<option value="' + res.data[j].project_id + '" data-cost="' + res.data[j].cost + '">' + res.data[j].project_name + '</option>';
						}
					}
					$('#project_id').html(option);
					$('#clear_child').val(is_clear);

					var projectChildId = $('#project_child_id').val();
					getChildProjectByParent(projectId, projectChildId);
				}
			})
		}

		function getChildProjectByParent(projectId, projectChildId) {
			var room_id = $('#room_name').data('room_id');
			if ($('#clear_child').val() == 0) {
				$.ajax({
					url: "/Repairhsd/RepairhsdUserOrder/ajaxGetChildProject/repairId/{BEESCRM:$repairId}",
					type: 'post',
					data: {'project_id': projectId, 'room_id': room_id},
					dataType: "json",
					success: function (res) {
						var option = '<option value="0" data-cost="0">请选择报修二级项目</option>';
						var cost = 0;
						for (var j = 0; j < res.data.length; j++) {
							if (res.data[j].project_id == projectChildId) {
								cost = res.data[j].cost;
								option += '<option value="' + res.data[j].project_id + '" data-cost="' + res.data[j].cost + '" selected>' + res.data[j].project_name + '</option>';
							} else {
								option += '<option value="' + res.data[j].project_id + '" data-cost="' + res.data[j].cost + '">' + res.data[j].project_name + '</option>';
							}
						}
						$('#project_child_id').html(option);
						$('#cost').text(cost);
					}
				});
			}else{
				$('#child_project').hide();
				$('#cost').text(0);
			}
		}
	
		//获取二级项目列表
		$("#project_id").change(function () {
			var project_id = $(this).val();
			var room_id = $('#room_name').data('room_id');
			if(project_id == 0){	//选中请选择，不做任何操作
				$('#project_child_id').html('<option value="0">请选择报修二级项目</option>');
				$('#child_project').hide();
				return false;
			}

			var _html = '<option value="0" data-cost="0">请选择报修二级项目</option>';
			$.ajax({
				url : '/Repairhsd/RepairhsdUserOrder/ajaxChildProjectList/repairId/{BEESCRM:$repairId}',
				type : 'POST',
				data : {'project_id' : project_id, 'room_id' : room_id},
				dataType : 'JSON',
				beforeSend : function () {
					$('.scrm-loadding').show();
				},
				success : function (data) {
					$('.scrm-loadding').hide();
					if(data.status == 'S'){
						for(var i=0; i< data.data.length; i++){
							_html += '<option value="' + data.data[i].project_id + '" data-cost="'+data.data[i].cost+'">' + data.data[i].project_name +'</option>';
						}
						$('#project_child_id').html(_html);
						$('#child_project').show();
						//$('#cost').text(data.cost);
					}else{
						$('#child_project').hide();
					}
				},
				error : function () {
					$.alert('error','网络错误，请重试');
				}
			});

		});

		$('#project_child_id').change(function(){
			$('#cost').text($(this).find('option:selected').data('cost'));
		});

		//点击更改地址或者添加地址将内容保存在sessionStorage
		$(document).on('click','.btn-change',function () {
			var img_url = $('#picture').attr('src');
			var content = $('#content').val();
			var project_id = $('#project_id').val();
			var project_name = $('#project_id').find('option:selected').text();
			var project_child_id = $('#project_child_id').val();
			var project_child_name = $('#project_child_id').find('option:selected').text();
			var cost = $('#cost').text();

			//设置
			var localObj = window.sessionStorage;
			localObj.setItem('img_url',img_url);
			localObj.setItem('content',content);
			localObj.setItem('project_id',project_id);
			localObj.setItem('project_name',project_name);
			localObj.setItem('project_child_id',project_child_id);
			localObj.setItem('project_child_name',project_child_name);
			localObj.setItem('cost',cost);
		});

		function getSessionStorage(){
			var localObj = window.sessionStorage;
			var img_url = localObj.getItem('img_url');
			var content = localObj.getItem('content');
			var project_id = localObj.getItem('project_id');
			var project_name = localObj.getItem('project_name');
			var project_child_id = localObj.getItem('project_child_id');
			var project_child_name = localObj.getItem('project_child_name');
			var cost = localObj.getItem('cost');
			if(img_url){
				$('#picture').attr('src',img_url);
			}
			if(content){
				$('#content').val(content);
			}

			if(project_id != 0 && project_name){
				var _html = '<option value="'+project_id+'">' + project_name + '</option>';
				$('#project_id').html(_html);
			}

			if(project_child_id != 0 && project_child_name){
				$('#child_project').show();
				var _html = '<option value="'+project_child_id+'">' + project_child_name + '</option>';
				$('#project_child_id').html(_html);
			}
			if (!cost){
				cost = 0;
			}
			$('#cost').text(cost);
		}

		//清除所有sessionStorage
		function delSessionStorage() {
			var localObj = window.sessionStorage;
			localObj.clear();
		}

		//提交 创建订单
		$(document).on('click','.addorder',function () {
			var img_url = $('#picture').attr('src');
			var content = $('#content').val();
			var project_id = $('#project_id').val();
//			var project_child_id = $('#project_child_id').val();
			var address_id = $('#address').attr('data-address_id');
			var community_name = $.trim($('#community_name').text());
			var community_id = $('#community_name').data('community_id');
			var building_name = $.trim($('#building_name').text());
			var building_id = $('#building_name').data('building_id');
			var room_name = $.trim($('#room_name').text());
			var detail_address = $.trim($('#address_detail').text());
			var real_name = $.trim($('#real_name').text());
			var mobile = $.trim($('#mobile').text());
			var room_id = $('#room_name').data('room_id');
			var order_amount = $('#cost').text();			

			if(!img_url){
				$.alert('error','请上传报修图片');
				return false;
			}

			if(!content){
				$.alert('error','请填写报修内容');
				return false;
			}

			if(!project_id  || project_id == 0){
				$.alert('error','请选择报修项目');
				return false;
			}
			var project_child_id = $("#project_child_id").val();
			//根据一级报修id去请求二级报修id 如果有二级报修id 但未选择 则提示请选择二级项目
			var flag = getChildProject(project_id, project_child_id, room_id);
			if (flag){
				return false;
			}
			if(!community_name || !building_name){
				$.alert('error','请填写报修地址');
				return false;
			}

			var data = {
				'url' :img_url,
				'content' : content,
				'project_id' : project_id,
				'project_child_id' : project_child_id,
				'address_id' : address_id,
				'community_name' : community_name,
				'community_id' : community_id,
				'building_name' : building_name,
				'building_id' : building_id,
				'room_id' : room_id,
				'room_name' : room_name,
				'real_name' : real_name,
				'mobile' : mobile,
				'order_amount' : order_amount
			};
			if(detail_address != ''){
				data.detail_address = detail_address;
			}
			$.ajax({
				url : '/Repairhsd/RepairhsdUserOrder/ajaxSubmitOrder/repairId/{BEESCRM:$repairId}',
				type : 'POST',
				data : data,
				dataType : 'JSON',
				beforeSend : function () {
					$('.scrm-loadding').show();
				},
				success : function (res) {
					//清楚sessionStorage
					delSessionStorage();
					$('.scrm-loadding').hide();
					if(res.status == 'S'){
						var timeOut="{BEESCRM:$timeOut}";

						if(timeOut==1){
							$.alert('success','亲爱的同学，您好！我们的维修师傅已经下班，您所提交的维修订单我们将在第二天为您受理及维修。如果遇到紧急情况，请您在递交网络报修同时，前往入住的公寓大厅现场报修登记。');
						}else{
							if (res.code !== 'undefined' && res.code == 1){
								$.alert('success', res.message);
							}else {
								$.alert('success', '下单成功，请耐心等待~');
							}
						}
						
						var url = '/Repairhsd/RepairhsdUserOrder/userOrderDetail/repairId/{BEESCRM:$repairId}/order_id/' + res.data.order_id;
						setTimeout("location.href = '" + url+ "'",2000);
					}else{
						$.alert('error',res.message);
					}
				},
				error : function () {
					$.alert('error','网络错误，请重试');
				}
			})
		});

		$(document).on("click",".js_cancel",function () {
			delSessionStorage();
		})
	});

	function getChildProject(project_id, project_child_id, room_id){
		var flag = 0;
		$.ajax({
			url : '/Repairhsd/RepairhsdUserOrder/ajaxChildProjectList/repairId/{BEESCRM:$repairId}',
			type : 'POST',
			data : {'project_id' : project_id, 'room_id' : room_id},
			dataType : 'JSON',
			async: false,
			success : function (res) {
				if (res.status == 'S'){
					//有二级分类的情况
					if (project_child_id == 0){
						$.alert('error', '请选择报修二级项目！');
						flag = 1;
					}
				}else if(res.status == 'F'){
					flag = 0;
				}
			},
		})
		return flag;
	}
</script>
</body>
</html>
